<template>
  <a-modal
    @cancel="close"
    :title="orderType == 'short-order' ? '自驾短租订单信息' : '自驾长租订单信息'"
    width="75vw"
    :visible="visible"
    unmount-on-close
    okText="关闭"
    @ok="close"
    hide-cancel
  >
    <table-index class="insure-card-table insure-card-table-border" :table="tableBusiness" @loadData="loadBusinessData">
      <template #orderCodeIn="{ record }">
        <div v-if="orderType == 'short-order'">{{ record.orderCode }}</div>
        <div v-else>{{ record.orderNo }}</div>
      </template>
      <template #orderStatusNameIn="{ record }">
        <div v-if="orderType == 'short-order'">{{ record.orderStatusName }}</div>
        <div v-else>{{ record.statusName }}</div>
      </template>
      <template #insureDateIn="{ record }">
        <div v-if="orderType == 'short-order'">
          <div v-if="record.actualStartTime && record.actualEndTime">
            <div><tag type="warn" class="tag-pickup">取</tag> {{ record.actualStartTime }}</div>
            <div><tag type="success" class="tag-pickup">还</tag> {{ record.actualEndTime }}</div>
          </div>
          <div v-else>
            <div><tag type="warn" class="tag-pickup">取</tag> {{ record.startTime }}</div>
            <div><tag type="success" class="tag-pickup">还</tag> {{ record.endTime }}</div>
          </div>
        </div>
        <div v-else>
          <div v-if="record.expectedUseCarTime && record.expectedReturnCarTime">
            <div><tag type="warn" class="tag-pickup">取</tag> {{ record.expectedUseCarTime }}</div>
            <div><tag type="success" class="tag-pickup">还</tag> {{ record.expectedReturnCarTime }}</div>
          </div>
          <div v-else>
            <div><tag type="warn" class="tag-pickup">取</tag> {{ record.realUseCarTime }}</div>
            <div><tag type="success" class="tag-pickup">还</tag> {{ record.realReturnCarTime }}</div>
          </div>
        </div>
      </template>
      <template #carModelNameIn="{ record }">
        <div v-if="orderType == 'short-order'">{{ record.carModelName }}</div>
        <div v-else>{{ record.originalModelName }}</div>
      </template>
    </table-index>
  </a-modal>
</template>

<script setup name="OrderListRecordModal">
  import { ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { sOrderList, lOrderList } from '@/api/market/member'
  const visible = ref(false)
  const orderType = ref('')

  // 关闭
  const close = () => {
    visible.value = false
  }
  const paramId = ref()
  const paramType = ref()
  // 打开
  const openModal = (id, type, orderTypes) => {
    paramId.value = id
    paramType.value = type
    orderType.value = orderTypes
    visible.value = true
    loadBusinessData()
  }

  defineExpose({
    openModal,
  })

  const loadBusinessData = () => {
    const param = {
      pageNumber: tableBusiness.pagination.page || 1,
      pageSize: tableBusiness.pagination.pageSize,
    }
    if (paramType.value == 'member') {
      param.memberId = paramId.value
    } else {
      param.clientId = paramId.value
    }
    tableBusiness.tableLoading = true
    if (orderType.value == 'short-order') {
      param.orderStatusList = [10, 100, 300, 200, 1000]
      sOrderList(param)
        .then((res) => {
          const result = res.result
          tableBusiness.dataList = result.data
          tableBusiness.pagination.pageCount = result.total
        })
        .finally(() => {
          tableBusiness.tableLoading = false
        })
    } else {
      param.statusList = [10, 100, 300, 200, 1000]
      lOrderList(param)
        .then((res) => {
          const result = res.result
          tableBusiness.dataList = result.data
          tableBusiness.pagination.pageCount = result.total
        })
        .finally(() => {
          tableBusiness.tableLoading = false
        })
    }
  }

  // table 配置
  const tableBusiness = useTable({
    pagination: {
      page: 1,
      pageSize: 10,
      showSizePicker: false,
      pageCount: 1,
    },
    bordered: {
      wrapper: true,
      cell: true,
    },
    columns: [
      { title: '订单号', dataIndex: 'orderCode', width: 230, slotName: 'orderCodeIn' },
      { title: '订单状态', dataIndex: 'orderStatusName', width: 130, slotName: 'orderStatusNameIn' },
      { title: '租赁周期', dataIndex: 'insureDate', width: 230, slotName: 'insureDateIn' },
      { title: '下单车型', dataIndex: 'carModelName', width: 130, slotName: 'carModelNameIn' },
      { title: '费用金额（元）', dataIndex: 'totalAmount', width: 130 },
      { title: '待支付金额（元）', dataIndex: 'receiveAmount', width: 140 },
    ],
    operates: false,
  })
</script>
<style lang="less" scoped>
  .insure-card-table {
    :deep {
      .odd-tr {
        > td {
          background-color: #e5e6eb;
        }
      }
      .insure-current {
        td {
          background-color: #e7eeff;
        }
        &:hover {
          > td {
            background-color: #e7eeff !important;
          }
          .arco-table-td.arco-table-col-fixed-right::before,
          .arco-table-td.arco-table-col-fixed-left::before {
            background-color: #e7eeff !important;
          }
        }
      }
      .arco-table-tr-expand {
        background: #e5e6ebff;
        > .arco-table-td > .arco-table-cell {
          padding: 30px 221px;
        }
      }
      .arco-table-expand-btn {
        width: 20px;
        height: 20px;
        background-color: inherit;
      }
    }
  }
  .insure-card-table-border {
    :deep {
      .arco-table-border .arco-table-tr .arco-table-th {
        border-bottom: none;
      }
    }
  }
  .link {
    font-size: 14px;
    color: #165dff;
    cursor: pointer;
  }
</style>
